<template>
  <div class="article">
    <el-card class="box-card" shadow="naver">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div slot="header" class="clearfix">
          <span>条件查询</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="文章标题">
                <el-input
                    size="mini"
                  v-model="formInline.title"
                  placeholder="文章标题"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="作者">
                <el-input
                size="mini"
                  v-model="formInline.author"
                  placeholder="作者"
                ></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form-item label="编辑类型">
                <el-select size="mini" v-model="formInline.editorType" placeholder="编辑类型">
                  <el-option label="富文本" value="0"></el-option>
                  <el-option label="MarkDown" value="1"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6" :offset="18">
            <div class="grid-content bg-purple">
              <el-form-item>
                  <el-button @click="resetForm('formInline')">重置</el-button>
                <el-button type="primary" @click="seach">查询</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 生成列表 -->
    <el-card class="box-card" shadow="naver">
        <div slot="header" class="clearfix">
          <el-button type="primary" @click="addtext">新增文章</el-button>
        </div>
    <el-table
    :data="list"
    border
    v-loading="loading"
    style="width: 100%">
    <el-table-column
      type="index"
      fixed
      align="center"
      width="100">
    </el-table-column>
    <el-table-column
      
      prop="title"
      label="文章标题"
      align="center"
      width="150">
    </el-table-column>
    <el-table-column
      prop="coverImg"
      label="展示图片"
      align="center"
      width="180">
      <template slot-scope="scope">
        <img :src="scope.row.coverImg" style="width:100px; height:100px" alt="">
      </template>
      
    </el-table-column>
    <el-table-column
      prop="modifyTime"
      label="添加时间"
      align="center"
      width="300">
    </el-table-column>
    <el-table-column
      prop="author"
      label="文章作者"
      align="center"
      width="120">
    </el-table-column>
    <el-table-column
      prop="editorType"
      label="文本属性"
      align="center"
      width="100"
      >
      <template slot-scope="scope">
          <span v-if="scope.row.editorType==0">富文本</span>
          <span v-else>MarkDown</span>
    </template>
    </el-table-column>
     <el-table-column
      prop="isShow"
      label="内容是否展示"
      align="center"
      width="200">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.isShow"
        @change="showpath(scope.row)"
         active-color="#13ce66"
  inactive-color="#ff4949"
    :active-value="1"
    :inactive-value="0"
    ></el-switch>
      </template>
 
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      align="center"
      width="140">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑文章</el-button>
        <el-button type="text" size="small" @click="del(scope.row.id)" style="color:red;">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
   </el-card>
  </div>
</template>

<script >
import { findArticlesApi,delApi,changeShowStatus } from "@/api/content/index";
export default {
  data() {
    return {
        formInline: {
          title:"",//标题
          author:"",
          editorType:"",
        },
        list:[],
        doot:{
            start:1,
            limit:10
        },
        currentPage:1,
        total:0,
        loading:false,
    };
  },
    created(){
        var _this=this
        findArticlesApi(this.doot.start,this.doot.limit,{...this.formInline}).then(res=>{
            _this.loading=true
            console.log(res.data.total)
            if(res.success){
                _this.total=res.data.total
              
                _this.list=res.data.rows
                _this.loading=false
            }else{
                this.$message.error("获取文章列表失败")
            }
           
        })
    },
  components: {},

  computed: {},

  mounted() {},

  methods: {
    // 是否展示变更
    showpath(el){
      console.log(el)
      changeShowStatus({isShow:el.isShow,id:el.id}).then(res=>{
        console.log(res)
        if(res.success){
          this.$message.success("修改成功")
        }else{
          if(el.isShow==0){
            el.isShow=1
          }else{
            el.isShow=0
          }
          this.$message.error("修改失败")
        }
      })
    },
    resetForm(e){
      this.$data.formInline = this.$options.data().formInline
    },
    // 编辑更改文章
    handleClick(row){
      this.$router.push({path:'/example/addarticle',query:{id:row.id}})
    },
    //   新增文章
    addtext(){
        // this.$router.push({name:'Addarticle'});
        this.$router.push('/example/addarticle');
    },
    //   获取最新数据
    findArticlesApi(){
        var _this=this
        _this.loading=true
        findArticlesApi(this.doot.start,this.doot.limit,{...this.formInline}).then(res=>{
            
            console.log(res.data.rows)
            if(res.success){
                
                _this.list=res.data.rows
                _this.loading=false
            }else{
                this.$message.error("获取文章列表失败")
                _this.loading=false
            }
           
        })
    },
    //   分页
     handleSizeChange(val) {
         var _this=this
         this.doot.limit=val
          this.$data.formInline = this.$options.data().formInline
        console.log(`每页 ${val} 条`);
        
      },
      handleCurrentChange(val) {
           var _this=this
          this.doot.start=val
           this.$data.formInline = this.$options.data().formInline
        console.log(`当前页: ${val}`);
        this.findArticlesApi()
      },
    //   查询事件
      seach(){
          console.log(this.formInline)
        this.$data.doot = this.$options.data().doot
        var _this=this
        this.findArticlesApi()
        console.log(this.doot)
      },
     del(el){
         var _this=this
         console.log(el)
         var qumens=el
         this.$confirm('此操作将删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        delApi(qumens).then(res=>{
                console.log(res)
                if(res.success){
                    this.$message.success("删除成功");
                   this.findArticlesApi()
                   
                }else{
                    this.$message.error("删除失败");
                }
                
            })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     }
      
  },
};
</script>
<style lang="scss" scoped>
.article {
  .box-card {
    margin: 30px;
  }
}
</style>